<script>
import { loadAdminCourse, removeAdminCourse } from '@/api/admin/course'
import { ElNotification } from 'element-plus'
import AddCourseDialog from './dialog/AddCourseDialog.vue'
import EditCourseDialog from './dialog/EditCourseDialog.vue'

const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

export default {
  components: {
    AddCourseDialog,
    EditCourseDialog,
  },
  data() {
    return {
      totle: 0,
      params: {
        pageNo: 1,
        pageSize: 10,
        cname: '',
        tname: '',
        department: '',
      },
      list: [],
      showAdd: false,
      showEdit: false,
    }
  },
  methods: {
    formattetCourse(row, cou, cv) {
      // console.log(row, cou, cv)
      let cArr = cv.split('-')
      // console.log(cArr)
      let wIndex = cArr[0]
      let start = cArr[1] * 1 + 1
      let end = cArr[1] * 1 + cArr[2] * 1
      return weeks[wIndex] + ' 第' + start + '节 至 第' + end + '节'
    },
    async initCourseData() {
      let data = await loadAdminCourse(this.params)
      // console.log(data)
      this.totle = data.total
      this.list = data.list
    },
    async deleteCourse(row) {
      await removeAdminCourse(row.course_id)
      ElNotification.success({
        title: `“${row.course_name}”删除成功`,
      })
      this.initCourseData()
    },
    openEdit(row) {
      // console.log(row) // 需要被编辑得数据对象
      // 编辑弹窗对于得组件实例对象
      // console.log(this.$refs.editDialog)
      // console.log(this.$refs.editDialog.params)
      this.$refs.editDialog.params = {
        course_id: row.course_id,
        course_teacher_id: row.teacher_id,
        course_name: row.course_name,
        course_grade: row.course_grade,
        course_time: row.course_time,
        course_location: row.course_location,
        course_credit: row.course_credit,
        course_max_size: row.course_max_size,
        course_exam_date: row.course_exam_date,
        course_exam_location: row.course_exam_location,
      }
      this.showEdit = true
    },
  },
  created() {
    this.initCourseData()
  },
}
</script>
<template>
  <el-card>
    <template #header>课程管理</template>
    <div class="nav-bar">
      <div class="search">
        <el-input size="small" placeholder="系名" clearable v-model="params.department"></el-input>
        <el-input size="small" placeholder="教师名" clearable v-model="params.tname"></el-input>
        <el-input size="small" placeholder="课程名" clearable v-model="params.cname"></el-input>
        <el-button size="small" type="primary" @click="initCourseData()">
          <template #icon>
            <el-icon><EpSearch /></el-icon>
          </template>
          <span>查询</span>
        </el-button>
      </div>
      <div>
        <el-button size="small" type="success" @click="showAdd = true">
          <template #icon>
            <el-icon><EpPlus /></el-icon>
          </template>
          <span>添加</span>
        </el-button>
      </div>
    </div>
    <el-table border stripe size="small" :data="list">
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
      <el-table-column label="序号" type="index" width="60"></el-table-column>
      <el-table-column label="课程名" prop="course_name"></el-table-column>
      <el-table-column label="代课教师" prop="teacher_name"></el-table-column>
      <el-table-column label="所属系" prop="department_name"></el-table-column>
      <el-table-column label="年级" prop="course_grade"></el-table-column>
      <el-table-column label="学分" width="50" #default="{ row }">
        <el-tag size="small" effect="dark">{{ row.course_credit }}</el-tag>
      </el-table-column>
      <el-table-column
        label="上课时间"
        prop="course_time"
        :formatter="formattetCourse"
        width="180"
      ></el-table-column>
      <el-table-column label="已选" width="50" #default="{ row }">
        <el-tag type="success" size="small" effect="dark">{{ row.course_selected_count }}</el-tag>
      </el-table-column>
      <el-table-column label="座位数" width="60" #default="{ row }">
        <el-tag type="info" size="small" effect="dark">{{ row.course_max_size }}</el-tag>
      </el-table-column>
      <el-table-column label="操作" width="120" #default="{ row }">
        <el-button type="primary" link @click="openEdit(row)">编辑</el-button>
        <!-- <el-button type="danger" link @click="deleteCourse(row)">删除</el-button> -->
        <el-popconfirm :title="`是否删除课程“${row.course_name}”`" @confirm="deleteCourse(row)">
          <template #reference>
            <el-button type="danger" link>删除</el-button>
          </template>
        </el-popconfirm>
      </el-table-column>
    </el-table>
    <el-pagination
      size="small"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[5, 10, 20, 30, 40, 50]"
      :total="totle"
      v-model:page-size="params.pageSize"
      v-model:current-page="params.pageNo"
      @change="initCourseData()"
    />
  </el-card>

  <!-- 使用添加弹窗 -->
  <AddCourseDialog v-model="showAdd" @reset="initCourseData"></AddCourseDialog>
  <EditCourseDialog ref="editDialog" v-model="showEdit" @reset="initCourseData"></EditCourseDialog>
</template>

<style scoped>
.nav-bar {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-bottom: 14px;
}
.nav-bar .el-input {
  width: 180px;
  margin-right: 10px;
}
.el-pagination {
  margin-top: 14px;
  justify-content: center;
}
.el-tag {
  width: 100%;
}
</style>
